<!-- 商品列表组件 <good-list :list="xx"></good-list> -->
<template>
    <view class="swiper-item-list" @click="toDetail">
        <view class="flex flex-between">
            <view class="books-pic">
                <image class="pic" mode="widthFix" :src="item.cover"></image>
            </view>
            <view class="flex-1 ml20">
                <view class="flex flex-between">
                    <text class="f34 ellipsis">{{ item.title }}</text>
                    <text class="f26 yellow">{{ item.latelyFollower }}</text>
                </view>
                <view class="f24 mt15 clamp2 gray">{{ item.shortIntro }}</view>
                <view class="f24 mt15 ">
                    <text>{{ item.author+' ' }} </text> 
                    <text class="gray" v-if="item.minorCate"> | {{ item.minorCate }}</text>
                </view>
                <!-- <view class="f24 mt15">作者 - {{ item.author }}</view> -->
            </view>
        </view>
    </view>
</template>

<script>
	import Mixin from '@/mixin'
	export default {
  		mixins:[Mixin],
		props:{
			item: {
				type: Object,
				default(){
					return {}
				}
			}
		},
        methods: {
            toDetail(){
                console.log(this.item)
                this.router({
                    url:'/pagesub/books/info?item='+ encodeURIComponent(JSON.stringify(this.item))
                })
            }
        }
	}
</script>

<style lang="scss">
	.pannel{
		padding: 10rpx 0;
	}
	.swiper-item-list {
		padding: 30rpx;
		margin: 0 20rpx;
		background: #fff;
		border-radius: 20rpx;
		box-shadow: 0 0 16rpx rgba($color: #000000, $alpha: .05);
	}
	.subnav-item{
		padding: 20rpx;
		background: #fff;
	}
	.img{
		height: 320rpx;
	}
	.books-pic{
		width: 120rpx;
		.pic{
			width: 100%;
			border-radius: 10rpx;
		}
	}
</style>
